<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Add Your favicon here -->
<link rel="icon" href="${ctx}/resource/v2/img/favicon.ico">

<title>西安三星 SW 综合系统 Samsung XIAN SW Comprehensive System</title>

<!-- Bootstrap core CSS -->
<link href="${ctx}/resource/v2/css/bootstrap.min.css" rel="stylesheet">

<!-- Animation CSS -->
<link href="${ctx}/resource/v2/css/animate.min.css" rel="stylesheet">

<link href="${ctx}/resource/v2/css/font-awesome.min.css"
	rel="stylesheet">
<link href="${ctx}/resource/v2/css/custome.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="${ctx}/resource/v2/css/style.css" rel="stylesheet">
<link href="${ctx}/resource/v2/css/cfe.css" rel="stylesheet">

    <style type="text/css">
    	.checkbox label{
    		padding-left: 0;
    	}
    	.radio label{
    		padding-left: 0;
    	}
    </style>

</head>
<body id="page-top">
	<div class="navbar-wrapper">
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header page-scroll">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#navbar" aria-expanded="false"
						aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#"><i class="fa fa-bold ">-VLLT</i></a>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a class="page-scroll features-icon-smaller"
							href="${ctx}/index.do" >首页</a></li>
						<li><a class="page-scroll features-icon-smaller" href="#vote">投票</a></li>
						<li><c:choose>
								<c:when test="${!empty sessionScope.LOGINED_USER.uid}">
									<a class="page-scroll features-icon-smaller"
										href="${ctx}/center/home/index.html"> <img
										style="width: 29px; height: 29px; border-radius: 50px; margin-top: -2px;"
										alt="" src="${ctx}${sessionScope.LOGINED_USER.userImage}" />&nbsp;${sessionScope.LOGINED_USER.name}
									</a>
									<a class="features-icon-smaller" href="${ctx}/user/logout.do"
										id="logout"><i class="fa fa-sign-out"></i>退出</a>
								</c:when>
								<c:otherwise>
									<a class="features-icon-smaller" id="login" href="${ctx}/user/loginPage.do"><i
										class="fa fa-sign-in"></i>登录</a>
								</c:otherwise>
							</c:choose></li>
						<li><a class="features-icon-smaller" id="center"
							href="${ctx}/center/home/index.html"><i class="fa fa-user"></i>个人中心</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
	<div id="inSlider" class="carousel slide carousel-fade"
		data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#inSlider" data-slide-to="0" class="active"></li>
			<li data-target="#inSlider" data-slide-to="1"></li>
		</ol>
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<div class="container">
					<div class="carousel-caption">
						<h1>
							西安三星 SW 综合系统 <br /> Samsung XIAN SW <br />Comprehensive System<br />
						</h1>
						<p>我们专注于提供各种细微服务：抽奖，投票，抽签，计时等等</p>
						<!-- <p>
                        <a class="btn btn-lg btn-primary" href="#" role="button">READ MORE</a>
                        <a class="caption-link" href="#" role="button">Inspinia Theme</a>
                    </p> -->
					</div>
					<div class="carousel-image wow zoomIn">
						<img src="${ctx}/resource/v2/img/laptop.png" alt="laptop" />
					</div>
				</div>
				<!-- Set background for slide in css -->
				<div class="header-back one"></div>

			</div>
			<div class="item">
				<div class="container">
					<div class="carousel-caption blank">
						<h1>
							我们的应用非常的灵活和简单 <br />操作便利，获取结果迅捷
						</h1>
						<p>请相信我们的服务源于您对我们的信任</p>
						<!-- <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> -->
					</div>
				</div>
				<!-- Set background for slide in css -->
				<div class="header-back two"></div>
			</div>
		</div>
		<a class="left carousel-control" href="#inSlider" role="button"
			data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"
			aria-hidden="true"></span> <span class="sr-only">Previous</span>
		</a> <a class="right carousel-control" href="#inSlider" role="button"
			data-slide="next"> <span
			class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>

	<section class="container features services" id="vote">

		<!-- 业务部分  开始  -->
		<div class="row wrapper white-bg animated fadeInRight min-height">
			<div class="row">
				<div class="col-lg-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>
								投票结果查看<small class="text-navy"> 查看本次投票的情况</small>
							</h5>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="col-lg-4">
									<div class="panel panel-primary">
										<div class="panel-heading text-center">
											<h3>${reMap.topicMap.title }</h3>
										</div>
										<div class="panel-body">
											<address>
												<strong>投票类型</strong><br>
												<c:choose>
													<c:when test="${reMap.topicMap.type eq '0'}">单选</c:when>
													<c:otherwise>多选</c:otherwise>
												</c:choose>
											</address>
											<address>
												<strong>投票权限</strong><br>
												<c:choose>
													<c:when test="${reMap.topicMap.scope eq '0'}">任何人可投</c:when>
													<c:otherwise>会员可投</c:otherwise>
												</c:choose>
											</address>
											<address>
												<strong>投票截止时间</strong><br> ${reMap.topicMap.deadline}
											</address>
											<address>
												<strong>我的选择</strong><br>
												<ol>
													<c:choose>
														<c:when test="${fn:length(reMap.optionMap) >0 }">
															<c:forEach items="${reMap.optionMap}" var="opList">
																<li>${opList.content }</li>
															</c:forEach>
														</c:when>
														<c:otherwise>
															<span class="badge badge-primary">您未进行过投票</span>
														</c:otherwise>
													</c:choose>
												</ol>
											</address>
										</div>
									</div>
								</div>
								<div class="col-lg-8" id="resultHighCharts"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section id="contact" class="gray-section contact">
		<div class="container">
			<div class="row m-b-lg">
				<div class="col-lg-12 text-center">
					<div class="navy-line"></div>
					<h1>联系我们</h1>
					<p>我们是Track1</p>
				</div>
			</div>
			<div class="row m-b-lg">
				<div class="col-sm-4 wow fadeInLeft">
					<div class="team-member">
						<img src="${ctx}/resource/v2/img/avatar5.jpg"
							class="img-responsive img-circle img-small" alt="">
						<h4>
							<span class="navy">皮带</span>●黄
						</h4>
						<p>本系统总架构师，负责设计，优化，重构，维护以及拓展新功能等各种烦人事宜。是一个年轻的极客和彪悍的攻城略地师长，最主要的还是娃他爸。</p>
						<ul class="list-inline social-icon">
							<li><a href="#"><i class="fa fa-qq"></i></a></li>
							<li><a href="#"><i class="fa fa-weibo"></i></a></li>
							<li><a href="#"><i class="fa fa-weixin"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="team-member wow zoomIn">
						<img src="${ctx}/resource/v2/img/avatar9.jpg"
							class="img-responsive img-circle" alt="">
						<h4>
							<span class="navy">晶晶</span>●王
						</h4>
						<p>网站代言人。Track1一级演员。最擅长反串，饰演各种娘们，而且塑造的角色性格显眼，特点突出。在手游王者荣耀最爱使用英雄亚瑟，没有最猥琐，只有更猥琐。</p>
						<ul class="list-inline social-icon">
							<li><a href="#"><i class="fa fa-qq"></i></a></li>
							<li><a href="#"><i class="fa fa-weibo"></i></a></li>
							<li><a href="#"><i class="fa fa-weixin"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-sm-4 wow fadeInRight">
					<div class="team-member">
						<img src="${ctx}/resource/v2/img/avatar7.jpg"
							class="img-responsive img-circle img-small" alt="">
						<h4>
							<span class="navy">愣头青</span>●杨
						</h4>
						<p>
							工程媛，负责详细功能实现。灭绝师太第N代传人，性格火爆，嫉恶如仇，爱憎分明，对的是对的，错的也是对的。逆我者亡，顺我者昌。欢迎找虐。</p>
						<ul class="list-inline social-icon">
							<li><a href="#"><i class="fa fa-qq"></i></a></li>
							<li><a href="#"><i class="fa fa-weibo"></i></a></li>
							<li><a href="#"><i class="fa fa-weixin"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12 text-center">
					<a href="mailto:test@email.com" class="btn btn-primary">发送邮件给我们</a>
					<p class="m-t-sm">或者在社交平台上关注我们</p>
					<ul class="list-inline social-icon">
						<li><a href="#"><i class="fa fa-qq"></i></a></li>
						<li><a href="#"><i class="fa fa-weibo"></i></a></li>
						<li><a href="#"><i class="fa fa-weixin"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2 text-center m-t-lg m-b-lg">
					<p>
						<strong>&copy; 2016 西安三星 SW</strong>All Rights Reserved By
						Samsung.
					</p>
				</div>
			</div>
		</div>
	</section>

	<a href="#inSlider" id="gotop" class="go2top"><i
		class="fa fa-arrow-up "></i></a>

	<input id="contextPath" type="hidden" value="${ctx}">
	<!--依赖的js-->
	<script src="${ctx}/resource/v2/js/jquery-2.1.1.js"></script>
	<script src="${ctx}/resource/v2/js/pace.min.js"></script>
	<script src="${ctx}/resource/v2/js/bootstrap.min.js"></script>
	<script src="${ctx}/resource/v2/js/classie.js"></script>
	<script src="${ctx}/resource/v2/js/cbpAnimatedHeader.js"></script>
	<script src="${ctx}/resource/v2/js/wow.min.js"></script>
	<script src="${ctx}/resource/v2/js/inspinia.js"></script>
	<script src="${ctx}/resource/v2/layer/layer.js"></script>
	

    <!-- highcharts -->
    <script src="${ctx}/resource/highcharts/highcharts.js"></script>
    <script src="${ctx}/resource/highcharts/highcharts-3d.js"></script>
    <script src="${ctx}/resource/highcharts/exporting.js"></script>
    
    <!-- iCheck -->
    <script src="${ctx}/resource/v2/js/icheck.min.js"></script>
    <!-- layer js -->
    <script src="${ctx}/resource/v2/layer/layer.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
    </script>
    <script>
     $(function () {
	     $.ajax({
			type: "post",
			url: "${ctx}/vote/getResultData.do",
			data: "topicId="+"${reMap.topicMap.tid }",
			dataType:"json",
			success:function(data){
				var resultData = [];
				if(data.length == 0){
					resultData.push({
	                    name: "没有人进行投票",
	                    y: 0,
	                    sliced: true,
	                    selected: true
	                });
				}else{
					for(var i = 0;i < data.length;i++){
						if(i == 0){
							resultData.push({
	    	                    name: data[i].content,
	    	                    y: data[i].count,
	    	                    sliced: true,
	    	                    selected: true
	    	                });
						}else{
							resultData.push([data[i].content,data[i].count]);
						}
					}
				}
				
				Highcharts.setOptions({
		             lang: {printChart:'打印图表',
		                downloadJPEG: '下载JPEG 图片', 
		                downloadPDF: '下载PDF文档',
		                downloadPNG: '下载PNG 图片',
		                downloadSVG: '下载SVG 矢量图', 
		                contextButtonTitle: '导出图片' 
		             }
		         });
				 var chart = new Highcharts.Chart({
				     chart: {
				         renderTo: 'resultHighCharts',
				    	 type: 'pie',
				         options3d: {
				             enabled: true,
				             alpha: 45,
				             beta: 0
				         }
				     },
				     title: {
				         text: '${reMap.topicMap.title }'
				     },
				     tooltip: {
				         pointFormat: '{series.name}: <b>{point.y}</b>'
				     },
				     plotOptions: {
				         pie: {
				             allowPointSelect: true,
				             cursor: 'pointer',
				             depth: 35,
				             dataLabels: {
				                 enabled: true,
				                 format: '{point.name}:<b>{point.y}</b>'
				             }
				         }
				     },
				     series: [{
				         type: 'pie',
				         name: '票数',
				         data: resultData
				     }]
				 });
			},
			error:function(d){
				layer.close(load);
				console.log(JSON.stringify(d));
			}
		});	 
	});
    </script>
</body>
</html>
